<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>short(短标)</title>
<meta name="author" content="KUI 中文手册">
<meta name="description" content="KUI 中文手册">
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>
<link rel="stylesheet" href="../../../style/icon.css" media="all"/>

<style>
        .GridShow .Row{margin-bottom:10px;}
        .GridShow [class^=Col]{border:1px solid #ccc;background-color:#fff;line-height:20px;padding:5px;margin-bottom:5px}
    </style>
</head>
<body >
<div>
   <div class="HelpBox">
   
        <h2>short(短标)</h2>
        <h3>概述</h3>
        <div class="desc">
        <p>包含照片、短标题字符串和简短的信息</p>
        </div>
        <div class="example GridShow">
        <h3>实例</h3>
        <h4>带文本短标:</h4>
        <pre><code>&lt;div class="Short">
    &lt;div class="ShortLabel">例子短标&lt;/div>
&lt;/div></code></pre>      
        <div class="Short">
			<div class="ShortLabel">例子短标</div>
		</div>
		<div class="Short">
			<div class="ShortLabel">另一个短标</div>
		</div>
		<h4>图标短标:</h4>
        <pre><code>&lt;div class="Short">
    &lt;div class="ShortMedia BBlue">
        &lt;i class="Icon IconCalendar">&lt;/i>
    &lt;/div>
    &lt;div class="ShortLabel">日期&lt;/div>
&lt;/div></code></pre>      
		<div class="Short">
			<div class="ShortMedia BBlue">
				<i class="Icon IconCalendar"></i>
			</div>
			<div class="ShortLabel">日期</div>
		</div>
		<div class="Short">
			<div class="ShortMedia BPurple">
				<i class="Icon IconEmail"></i>
			</div>
			<div class="ShortLabel">邮箱</div>
		</div>
		
        <ul class="List">
        <li>ShortMedia - 是一个圆形背景元素，颜色参照 <a href="background.html">背景</a> 色设置或自定义。</li>
        </ul>
		
        <h4>联络短标:</h4>
		<pre><code>&lt;div class="Short">
    &lt;div class="ShortMedia">&lt;img src="../../../images/01.jpg">&lt;/div>
    &lt;div class="ShortLabel">姓名&lt;/div>
&lt;/div>
&lt;div class="Short">
    &lt;div class="ShortMedia BRed">王&lt;/div>
    &lt;div class="ShortLabel">姓名&lt;/div>
&lt;/div></code></pre>
		<div class="Short">
			<div class="ShortMedia">
				<img src="../../../images/01.jpg">
			</div>
			<div class="ShortLabel">姓名</div>
		</div>
		<div class="Short">
			<div class="ShortMedia BRed">王</div>
			<div class="ShortLabel">姓名</div>
		</div>

        <h4>删除/标签:</h4>
        <pre><code>&lt;div class="Short">
    &lt;div class="ShortLabel">例子短标&lt;/div>
    &lt;a href="javascript:;" class="ShortDel">&lt;/a>
&lt;/div>    
&lt;div class="Short">
    &lt;div class="ShortMedia">
        &lt;img src="../../../images/02.jpg">
    &lt;/div>
    &lt;div class="ShortLabel">姓名&lt;/div>
    &lt;a href="javascript:;" class="ShortDel">&lt;/a>
&lt;/div></code></pre>  
<div class="Short">
	<div class="ShortLabel">例子短标</div>
	<a href="javascript:;" class="ShortDel"></a>
</div>    
<div class="Short">
	<div class="ShortMedia">
		<img src="../../../images/02.jpg">
	</div>
	<div class="ShortLabel">姓名</div>
	<a href="javascript:;" class="ShortDel"></a>
</div>		
    
        <ul class="List">
        <li>ShortDel - 是一个删除样式。删除事件可以绑定到这个元素上</li>
        </ul>
		
		
		
   </div>

</div>

</div>
</body>
</html>
